<template>
    <div>
        <!-- 顶部 -->
        <div class="title">
            <van-nav-bar
                title="填写订单"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />           
        </div>
        <div class="address">
            <div class="address_list" @click="onclick">
                <div class="addresss_list_a">
                    <div class="addresss_list_a_box1">{{addresslist.default_set}}</div>  
                    <div class="addresss_list_a_box2">{{addresslist.area_name}}</div>                
                </div>
                <div class="addresss_list_b">
                    <div class="addresss_list_b_box3">{{addresslist.desc}}</div>
                    <div class="addresss_list_b_box4">»</div>
                </div>
                <div class="addresss_list_c">
                    <div class="addresss_list_c_box5">{{addresslist.name}}</div>
                    <div class="addresss_list_c_box6">{{addresslist.phone}}</div>
                </div>
            </div>
        </div>
        <div class="shop">
            <div class="shop_commodity" v-for="item in orderlist" :key="item">
                <div class="shop_commodity_image">
                    <img :src="item.s_good.s_goods_photos[0].path" alt="">
                </div>
                <div class="shop_commodity_wrap">
                    <div class="shop_commodity_wrap_name">{{item.s_good.name}}</div>
                    <div class="shop_commodity_wrap_desc">{{item.s_good.desc}}</div>
                    <div class="shop_commodity_wrap_money">
                        <div class="yan">￥：{{item.s_good.price}}</div>
                    </div>
                    <div class="shop_commodity_wrap_youhui"></div>
                </div>
            </div>
        </div>
        <van-submit-bar :price="shopSum" button-text="提交订单" @submit="onSubmit">
            
        </van-submit-bar>
    </div>
</template>

<script setup>
import { Dialog } from 'vant';
import {get,post} from '../../utils/request'
import {useRouter,useRoute} from 'vue-router'
import { ref,computed} from 'vue';
const router = useRouter()
const route = useRoute()
const checked = ref(false);
let a =ref('默认')
let addresslist =ref([])

// 获取地址请求
let getdefalutAddress = async()=>{
    let res = await get(`/defalutAddress`)
    console.log(res);
    addresslist.value= res.result
    // console.log(addresslist.value.default_set);
    if(addresslist.value.default_set == 1){
        addresslist.value.default_set ='默认'
    }
    // console.log(addresslist.value.default_set);
}
getdefalutAddress()



const onClickLeft = () => history.back()
const onclick = ()=>{
    router.push("/address")
}

let orderlist =JSON.parse(route.query.orderlist) 
console.log(orderlist);
console.log(orderlist[0].s_good.id);


// 合计
const shopSum = computed(() => {
  let sum = orderlist.reduce((sum, item) => {
    console.log(sum);
    return (sum += item.s_good.price *100);

  }, 0);
  return sum;
});
console.log(shopSum);

const onSubmit = async()=>{
    let data={
        goods_info:[],
        shoppingCartIds:[],
        
    }
    orderlist.forEach((ele)=>{
     let a = {
        id :ele.goods_id,
        num:ele.num
     }
     data.goods_info.push(a)
     data.shoppingCartIds.push(ele.id)
   })
   data.addr_id=addresslist.value.id
   data.project_id = 244
   console.log(data);
   let res = await post(`/order`,data)
   console.log(res);
    //弹窗
    Dialog.confirm({
        title: '提交成功',
        message:
            '请确认是否跳转到订单页',
    })
    .then(() => {
        router.push("/order")
    })
    .catch(() => {
    // on cancel
        router.push("/submitorder")
    });

}

</script>

<style lang="scss" scoped>
.nav{
    width: 100%;
    height: 0.2rem;
}

.address_list{
    margin-top: 0.1rem;
    // margin-left: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.1rem;
    width: 100%;
    height: 0.8rem;
    border-radius: 0.05rem;
    background-color: skyblue;
    border-bottom: 0.02rem solid #ccc;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);
}

.van-submit-bar{
    position:fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: .49rem;
    border:none;
}
.addresss_list_a{
    display: flex;
    width: 100%;
    height: 0.2rem;


    .addresss_list_a_box1{
        width: 0.35rem;
        height: 0.2rem;
        font-size: 0.16rem;
        line-height: 0.2rem;
        color: red;
    }
    .addresss_list_a_box2{
        margin-left: 0.1rem;
        width: 3rem;
        height: 0.2rem;
        font-size: 0.16rem;
        line-height: 0.2rem;
    }
}
.addresss_list_b{
    display: flex;
    margin-top: 0.1rem;
    width: 100%;
    height: 0.2rem;

    .addresss_list_b_box3{
        width: 3rem;
        height: 0.2rem;
        font-size: 0.16rem;
        line-height: 0.2rem;
    }

    .addresss_list_b_box4{
        margin-left: 0.42rem;
        width: 0.1rem;
        height: 100%;
        font-size: 0.2rem;
    }
}
.addresss_list_c{
    display: flex;
    margin-top: 0.1rem;
    width: 100%;
    height: 0.2rem;

    .addresss_list_c_box5{
        width: 0.5rem;
        height: 0.2rem;
        font-size: 0.16rem;
        line-height: 0.2rem;
    }

    .addresss_list_c_box6{
        margin-left: 0.2rem;
        width: 1.1rem;
        height: 0.2rem;
        font-size: 0.16rem;
        line-height: 0.2rem;
    }
}

.shop{
    display: flex;
    min-height: 7rem;
    flex-direction: column;
    background-color: #F8F8F8;
    overflow: hidden;

}

.shop_commodity{
    display: flex;
    margin-top: 0.1rem;
    // margin-bottom: 0.2rem;
    display: flex;
    width: 100%;
    height: 1.5rem;
    background: #FFFFFF;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);
    .shop_commodity_image{
        margin-top: 0.02rem;
        width: 1.4rem;
        height: 95%;
        border-radius: 0.2rem;
        background: #FFFFFF;
        border:0.01rem solid #fff;
        box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);

        img{
            width: 1.4rem;
            height: 90%;
        }
    }
    .shop_commodity_wrap{
        width: 2.2rem;
        height: 100%;
    }
    .shop_commodity_wrap_name{
        padding-top: 0.1rem;
        padding-left: 0.1rem;
        margin-top: 0.01rem;
        width: 2.1rem;
        height: 0.2rem;
        font-size: 0.16rem;
    }
    .shop_commodity_wrap_desc{
        margin-top: 0.1rem;
        width: 2.2rem;
        height: 0.3rem;
        font-size: 0.12rem;
        line-height: 0.2rem;
        white-space:nowrap;
        overflow: hidden;
    }
    .shop_commodity_wrap_money{
        display: flex;
        margin-top: 0.1rem;
        width: 2.2rem;
        height: 0.3rem;

        .yan{
            padding-left: 0.05rem;
            width: 0.8rem;
            height: 0.3rem;
            font-size: 0.16rem;
            line-height: 0.3rem;
        }
    }
    .shop_commodity_wrap_youhui{
        margin-top: 0.05rem;
        width: 2.2rem;
        height: 0.3rem;
    }
}
</style>